<template>
    <!-- 手机短信登录 -->
    <div class="smsLogin">
        <!-- <h1>手机短信登录</h1> -->
        <el-form-item label="手机号" prop="phone">
            <el-input class="phone" type="text" v-model="loginForm.phone" autocomplete="off"></el-input>
            <span style="text-decoration:underline">点击获取验证码</span>
        </el-form-item>
        <el-form-item label="验证码" prop="checkPass">
            <el-input type="password" v-model="loginForm.checkPass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('loginForm')">提交</el-button>
            <el-button @click="resetForm('loginForm')">重置</el-button>
        </el-form-item>
    </div>
</template>
<script>
export default {
    data() {
        // 验证手机号正则
        let phoneCodeVerification = /^[1][3,4,5,7,8][0-9]{9}$/;
        var validatePhone = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入手机号'));
            } else if (phoneCodeVerification.test(value)) {
                callback("请输入正确手机号")
            } else {
                callback()
            }
        };
        // 验证验证码
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入验证码'));
            }
        };
        return {
            loginForm: {
                phone: '',
                checkPass: '',
            },
            rules: {
                phone: [
                    { validator: validatePhone, trigger: 'blur' }
                ],
                checkPass: [
                    { validator: validatePass, trigger: 'blur' }
                ],
            }
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
}
</script>

<style lang="less" scoped>
.smsLogin {
    .el-form-item {
        /deep/.el-form-item__label {
            color: rgb(242, 102, 26);
            font: 20px/40px "楷体";
        }

        .phone {
            width: 151px;
            border-radius: 5px 0 0 5px;
            float: left;
        }

        span{
            display: line-block;
            color: rgb(242, 102, 26);
            background: #fff;
            border-radius: 0 5px 5px 0;
            display: block;
            
        }
    }


}
</style>